<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" label-width="120px" inline size="small">
                    <el-form-item label="姓名" label-width="40px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="费用类型">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="练车费" value="shanghai"></el-option>
                            <el-option label="上牌费" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否审核">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款类型">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="全款" value="shanghai"></el-option>
                            <el-option label="首款" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.name" style="width: 290px;"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" label-width="40px">
                        <el-date-picker v-model="form.region" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: 500px;">
                        </el-date-picker>
                    </el-form-item>
                    <div class="btn">
                        <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
                        <el-button type="info" plain size="small">批量审核</el-button>
                        <el-button type="info" plain size="small">取消审核</el-button>
                        <el-button type="info" plain size="small">导出</el-button>
                    </div>

                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 660px;">
                <el-table ref="multipleTable" :data="tableData" height="100%" border stripe>
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>
        </main>

        <footer>
            <div class="money">
                <p>实收：<span>￥146,550 元</span></p>
                <p>总金额：<span>￥62,723 元</span></p>
                <p>欠款：<span>￥83,327 元</span></p>
            </div>
        </footer>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-11-10 09:42:17  星期五
* @description   其他收银
**/


export default {
    data() {
        return {
            form: { name: '', region: '' },
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.btn {
    margin: 0 0 10px 50px;
    display: inline-block;
}

footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .money {
        width: 100%;
        display: flex;
        margin-top: 20px;

        p {
            margin: 0;
            padding: 0;
        }

        p:first-child {
            span {
                color: rebeccapurple;
            }
        }

        p:nth-of-type(2) {
            margin-left: 30px;

            span {
                color: #3498db;
            }
        }

        p:last-child {
            margin-left: 30px;

            span:last-child {
                color: red;
            }
        }

        p:first-child::before,
        p:nth-of-type(2)::before,
        p:last-child::before {
            display: inline-block;
            content: '';
            width: 13px;
            height: 13px;
            border-radius: 50%;
            margin-right: 5px;
        }

        p:first-child::before {
            background: rebeccapurple;
        }

        p:nth-of-type(2)::before {
            background: #3498db;
        }

        p:last-child::before {
            background: red;
        }
    }
}
</style>